Customizing HTML IntelliSense in Visual Studio

TLDR

• You can extend Visual Studio's HTML IntelliSense by editing SchemaCatalog.xml and referencing a custom XSD file.
• This configuration is global and cannot be isolated to a single project.
• Updating Visual Studio resets SchemaCatalog.xml, causing custom settings to be lost.
• <xsd:element /> is used to specify the triggering HTML tag; using ___all___ applies it to all tags.
• <xsd:attributeGroup /> can encapsulate multiple custom attributes into a group for easy reuse.
• <xsd:restriction /> combined with <xsd:enumeration /> can restrict and enumerate valid values for attributes.

How to Configure Extended HTML IntelliSense

When a project uses a large number of custom HTML attributes (such as data-*) for JavaScript logic binding, you can enable auto-completion by modifying Visual Studio's schema settings to avoid typos or missing attributes.

When to use this

When you want to get IntelliSense suggestions for project-specific custom attributes in the Visual Studio HTML editor, you must manually modify the IDE's configuration file.

Configuration Steps

1. Locate the SchemaCatalog.xml file. The path is usually:
   • Visual Studio 2019: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\Extensions\Microsoft\Web Tools\Languages\Schemas\HTML\
   • Visual Studio 2022: C:\Program Files\Microsoft Visual Studio\2022\Community\Common7\IDE\Extensions\Microsoft\Web Tools\Languages\Schemas\HTML\
2. Add a <schema /> node to the file to reference your custom XSD file:

   <schema File="Wing.xsd" FriendlyName="Wing" IsSupplemental="true" CustomPrefix="data-" />

   • File: The filename of your custom XSD.
   • IsSupplemental: Must be set to true to take effect.
   • CustomPrefix: Sets the prefix that triggers IntelliSense (e.g., data- or ng-).
3. Create the corresponding XSD file in the same directory.
4. Restart Visual Studio for the changes to take effect.

WARNING

This configuration is global. Additionally, SchemaCatalog.xml is reset every time Visual Studio is updated, which will cause your settings to be lost. If you do not need certain built-in suggestions (such as AngularJS or Aria), you can disable them by commenting out their XML references.

XSD File Structure and Implementation

The XSD file defines which HTML tags can trigger IntelliSense, as well as the attributes and values associated with those tags.

When to define an XSD

When you need to bind a set of custom attributes to specific HTML tags (such as input or button) and want a list of options to choose from when entering attribute values.

Core Node Descriptions

• <xsd:element />: Sets the trigger condition. Enter the HTML tag name in the name attribute; if you enter ___all___, it will apply to all tags.
• <xsd:attribute />: Defines the custom attribute name.
• <xsd:attributeGroup />: Defines multiple attributes as a group, making it easy to reference them repeatedly across different tags.
• <xsd:restriction />: Restricts the input range of attribute values; combined with <xsd:enumeration />, it can list allowed options.

Implementation Example

Below is an example of an XSD structure that defines various data-* attributes:

<?xml version="1.0" encoding="utf-8" ?>
<xsd:schema
  xmlns:xsd="http://www.w3.org/2001/XMLSchema"
  xmlns:vs="http://schemas.microsoft.com/Visual-Studio-Intellisense"
  vs:ishtmlschema="true">

  <xsd:attributeGroup name="buttonAttributeGroup">
    <xsd:attribute name="data-action-url" />
    <xsd:attribute name="data-action-ignore-error">
      <xsd:simpleType>
        <xsd:restriction base="xsd:NMTOKEN">
          <xsd:enumeration value="true" />
        </xsd:restriction>
      </xsd:simpleType>
    </xsd:attribute>
  </xsd:attributeGroup>

  <xsd:element name="button">
    <xsd:complexType>
      <xsd:attributeGroup ref="buttonAttributeGroup" />
    </xsd:complexType>
  </xsd:element>
</xsd:schema>

Execution results:

• When you type data-, relevant attributes will be listed automatically.
• After selecting data-action-ignore-error, the editor will suggest the optional value true.



TIP

This method is particularly suitable for projects using Unobtrusive JavaScript, where events are bound by defining custom attributes in HTML. It can significantly improve the efficiency and accuracy of attribute entry during development.

Change Log

• 2022-11-11 Initial document created.